<template>
  <a-card class="tree-card">
    <a-tree v-if="treeData.length" default-expand-all block-node :tree-data="treeData" :field-names="fieldNames">
    </a-tree>
  </a-card>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils'
import axios from 'axios'
const treeData = ref([]) // 声明初始化数据
const fieldNames = {
  title: 'name', // 指定显示的标题的对应的字段的名字
  key: 'id'  // 树的唯一键
}

onMounted(() => {
  getDeparts()
})
// 获取组织架构
const getDeparts = async () => {
  const { data } = await axios.get('http://localhost:5173/static/department.json')
  const depts = data.data.depts
  treeData.value = transListToTreeData(depts, "") // 找数据要从根上找
}
</script>
<style scoped>
/* scoped 会导致 所有的样式 带有属性 hashcode的编码值 */
/* 加上scoped不会污染相关的组件 */
.tree-card {
  margin: 20px
}
</style>
